<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddPage ref="addRef" @getDataList="getDataList" />
        <div class="sch_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <div class="sch_tab" :class="{'active':queryInfo.type==2}" @click="selectType(2)">PDD</div>
                <div class="sch_tab" :class="{'active':queryInfo.type==1}" @click="selectType(1)">JD</div>
                <div class="sch_tab" :class="{'active':queryInfo.type==3}" @click="selectType(3)">TBK</div>
            </div>
            <div class="flexbox flexcenter">
                <el-input placeholder="商品ID/商品名称/用户" size="small" style="width:260px;margin-right:12px" clearable @change="getDataList(1)" suffix-icon="el-icon-search" v-model="queryInfo.keyword">
                </el-input>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="AddPage()">创建落地页</el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="goods_name" label="商品名称" min-width="160">
                </el-table-column>
                <el-table-column prop="goods_id" label="商品ID" width="160">
                </el-table-column>
                <el-table-column prop="username" label="用户" width="160">
                </el-table-column>
                <el-table-column prop="link" :label="queryInfo.type==2?'自研落地页链接(成交回传)':'自研落地页链接'" width="300">
                    <template slot-scope="scope">
                        <template v-if="scope.row.link">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.link}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.link)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="200">
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddPage from "./AddPage";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                keyword: "",
                type:2
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        selectType(type){
            this.queryInfo.type = type
            this.getDataList(1)
        },
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "cid/Ground/cidGroundList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        AddPage() {
            this.$refs.addRef.dialogVisible = true;
            this.$refs.addRef.addForm.type = this.queryInfo.type
            this.$refs.addRef.getUserList();
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddPage,
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.strategy_head {
    height: auto;
    margin-top: 20px;
}
.oneline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy_btn {
    cursor: pointer;
    flex-shrink: 0;
}
</style>


